import { StyleSheet, View } from "react-native";
import { GroupItem } from "../../../mobx/home";
import { ObserverText, ObserverView } from "../../../components";
import { dpmain, dpw10, dpw12, dpw16, dpw8 } from "../../../constants";
import TodayUpdate from "./TodayUpdate";
import ModelFour from "./ModelFour";
import ModelOne from "./ModelOne";
import ModelFive from "./ModelFive";
import ModelTwo from "./ModelTwo";

function MainModel(props: GroupItem & { scrollToTop: Function, navigation: any, typeId: number }) {
    const { Title, Describe, TempType, BtnList, BindList, DetailImage, scrollToTop, navigation, typeId } = props
    
    const getChildren = () => {
        switch (TempType) {
        case 1:
            return (
                <View style={styles.box}>
                    <ModelOne
                        bindList={BindList}
                        btnList={BtnList}
                        scrollToTop={scrollToTop}
                        navigation={navigation}
                        typeId={typeId}
                        Title={Title}
                        tempType={TempType}
                    />
                </View>
            )
        case 5:
            return (
                <View style={styles.box}>
                    <ModelFive
                        bindList={BindList}
                        btnList={BtnList}
                        scrollToTop={scrollToTop}
                        navigation={navigation}
                        typeId={typeId}
                        Title={Title}
                        tempType={TempType}
                    />
                </View>
            )
        case 2:
            return (
                <View style={styles.box}>
                    <ModelTwo
                        bindList={BindList}
                        btnList={BtnList}
                        scrollToTop={scrollToTop}
                        navigation={navigation}
                        typeId={typeId}
                        Title={Title}
                        tempType={TempType}
                    />
                </View>
            )
        case 3:
            return <TodayUpdate list={BindList} btnList={BtnList} navigation={navigation} typeId={typeId} />
        case 4:
            return <ModelFour list={BindList as any} Title={Title} btnList={BtnList} navigation={navigation} typeId={typeId} />
            default:
                return null
        }
    }
    

    return (
        <ObserverView style={{ marginTop: dpw12 }}>
            {Title && TempType !== 4 && <ObserverText style={styles.title} type="model-title" tKey={Title} />}
            {Describe && TempType !== 4 ? <ObserverText style={styles.subTitle} type='desc' tKey={Describe} /> : <View style={{height: dpw8}}></View>}
            {getChildren()}
        </ObserverView>
    )
}

export default MainModel

const styles = StyleSheet.create({
    box: {
        marginHorizontal: dpw12,
    },
    title: {
        marginHorizontal: dpw16,
    },
    subTitle: {
        marginHorizontal: dpw16,
        marginBottom: dpw12,
    }
})
